/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'../../open_scss/theme';
@import'../../open_scss/color';
@import'../../open_scss/model';
.sign {
    @include breakLine;
    width: 99%;
    overflow: hidden;
    padding-bottom: 4rem;
    .sign_in {
        overflow: hidden;
        display: inline-block;
        position: relative;
        vertical-align: top;
        box-shadow: 0 1px 6px 1px rgba($black, 0.3);
        width: 100%;
        margin-top: 1.5rem;
        min-height: 5rem;
        background-color: $white;
        margin-left: 0;
        @include comic(0.2);
        &.focus {
            margin-left: -100%;
        }
        a {
            // text-shadow: 0 1px 5px black;
            color: $black;
        }
        .inputform {
            min-height: 2rem;
            position: relative;
            width: 90%;
            padding: 2.5rem 5% 2rem 5%;
            // height: 202px;
            overflow: hidden;
            @include breakLine;
            @include comic(0.2);
            &.focus {
                height: 288px;
                .inbox {
                    margin-left: -120%;
                }
            }
            .inbox,
            .upbox {
                @include comic(0.3);
                margin-left: 0;
                margin-right: 20%;
                display: inline-block;
                vertical-align: top;
                width: 100%;
            }
            .forgot {
                display: block;
                color: $white;
                padding: 5px 0;
                width: 170px;
                text-align: center;
                background-color: $pink;
                margin-left: 0;
                &.focus {
                    background-color: $grayLighter;
                    color: $silver;
                }
            }
            .checkcode {
                margin-top: -20px;
                display: block;
                color: $white;
                padding: 5px 0;
                width: 170px;
                text-align: center;
                background-color: $pink;
                margin-left: 0;
                &.focus {
                    background-color: $grayLighter;
                    color: $silver;
                }
            }
        }
        .readbox {
            position: relative;
            min-height: 3rem;
            background-color: $grayLighter;
            padding: 2rem 5%;
            line-height: 2rem;
            font-size: 15px;
            .item {
                margin: .75rem 0;
                a {
                    color: $pink;
                }
            }
            .btn {
                position: absolute;
                right: 1rem;
                top: -2rem;
                border-radius: 50%;
                width: 4rem;
                height: 4rem;
                background-color: $pink;
                outline: none;
                border: 0;
                padding: 0;
                color: $white;
                z-index: 998;
                box-shadow: 0 5px 15px 1px rgba($black, 0.8)!important;
                @include comic(0.3);
                &.focus {
                    top: 18rem;
                }
            }
        }
    }
    .wrapper {
        line-height: 19px;
        margin-top: -20px;
        margin-bottom: 20px;
        .check{
            display: inline-block;
            vertical-align: top;
        }
        input#toggle {
            max-height: 0;
            max-width: 0;
            opacity: 0;
            display: none;
        }
        input#toggle + label {
            display: block;
            position: relative;
            box-shadow: inset 0 0 0px 1px #d5d5d5;
            text-indent: -5000px;
            height: 19px;
            width: 50px;
            border-radius: 15px;
        }
        input#toggle + label:before {
            content: "";
            position: absolute;
            display: block;
            height: 19px;
            width: 30px;
            top: 0;
            left: 0;
            border-radius: 15px;
            background: rgba(19, 191, 17, 0);
            -moz-transition: .25s ease-in-out;
            -webkit-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }
        input#toggle + label:after {
            content: "";
            position: absolute;
            display: block;
            height: 19px;
            width: 30px;
            top: 0;
            left: 0px;
            border-radius: 15px;
            background: white;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
            -moz-transition: .25s ease-in-out;
            -webkit-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }
        input#toggle:checked + label:before {
            width: 50px;
            background: rgba(19, 191, 17, 1);
        }
        input#toggle:checked + label:after {
            left: 20px;
            box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
        }
    }
}
